import {messages} from "share/common";
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { Icon } from 'antd';
import {connect} from 'react-redux';
import 'styles/advertisement-page/ad-common.scss';

import icon1Img from 'images/home/unbox-setting/icon/1.jpg';
import icon2Img from 'images/home/unbox-setting/icon/2.jpg';
import icon3Img from 'images/home/unbox-setting/icon/3.jpg';
import icon4Img from 'images/home/unbox-setting/icon/4.jpg';
import icon5Img from 'images/home/unbox-setting/icon/5.jpg';
import icon6Img from 'images/home/unbox-setting/icon/6.jpg';
import icon7Img from 'images/home/unbox-setting/icon/7.jpg';
import icon8Img from 'images/home/unbox-setting/icon/8.jpg';
import icon9Img from 'images/home/unbox-setting/icon/9.jpg';
import icon10Img from 'images/home/unbox-setting/icon/10.jpg';
import icon11Img from 'images/home/unbox-setting/icon/11.jpg';

import adPhoneJaImg from 'images/ad-img/ad-phone-ja.png';
import adPhoneEnImg from 'images/ad-img/ad-phone-en.png';
import adPhoneZhImg from 'images/ad-img/ad-phone-zh.png';

function mapStateToProps(state) {
  return {
    language: state.main.language
  }
}

@connect(mapStateToProps)

class AdCommon extends Component {
  constructor(props) {
    super(props);
    this.imgMap = {
      'en': adPhoneEnImg,
      'ja': adPhoneJaImg,
      'zh_cn': adPhoneZhImg,
      'zh_tw': adPhoneEnImg,
      'it_IT': adPhoneEnImg
    }
  }

  renderTags = () => {
    const { currentAd } = this.props;
    let styleMap = {
      'intelRcvDocument': 'two-inline',
      'intelAudit': 'three-inline',
      'bankWithEnt': 'three-inline',
      'aliPay': 'three-inline',
      'intelAccounting': 'three-inline',
      'elecArchive': 'three-inline',
      'budgetManagement': 'three-inline',
      'creditReimb': 'four-inline',
      'huabei': 'three-inline',
      'rebecca': 'four-inline',
      'airfare': 'two-inline'
    };
    return (
      currentAd.pageTag && currentAd.pageTag.map((item)=>{
        return (
          <div className={`single-ad-tag ${styleMap[currentAd.shortcutCode]}`}>
            <svg style={{marginRight: 5, width: 18, height: 18, transform: 'translate(0px, 3px)'}} viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" width="36" height="36">
              <path d="M9,0 C13.9705627,0 18,4.02943725 18,9 C18,13.9705627 13.9705627,18 9,18 C4.02943725,18 0,13.9705627 0,9 C0,4.02943725 4.02943725,0 9,0 Z M11.7599823,5.67443067 L7.968,10.548 L5.58565161,8.64293549 L4.41434839,10.1070645 L8.28150987,13.2007937 L13.2400177,6.82556933 L11.7599823,5.67443067 Z" id="形状结合"  fill="#32CD91" />
            </svg>
            <span className='ad-common-tag-text'>{item}</span>
          </div>
        )
      })
    )
  }

  render() {
    const { currentAd } = this.props;
    const { code } = this.props.language;

    let map = {
      'intelRcvDocument': icon1Img,
      'intelAudit': icon2Img,
      'bankWithEnt': icon3Img,
      'aliPay': icon4Img,
      'intelAccounting': icon5Img,
      'elecArchive': icon6Img,
      'budgetManagement': icon7Img,
      'creditReimb': icon8Img,
      'huabei': icon9Img,
      'rebecca': icon10Img,
      'airfare': icon11Img
    }

    return (
      <div className='ad-common'>
        <div className="ad-common-header">
          <Icon className="close-btn" type="close" onClick={()=>{this.props.onCancel && this.props.onCancel()}} />
          <div className="head-content">
            <img src={map[currentAd.shortcutCode]} onMouseDown={e=>e.preventDefault()} className="ad-img"/>
            <div className="title-and-text">
              <div className="ad-common-title">
                {currentAd.shortcutName}
              </div>
              <div className="ad-common-desc">
                {currentAd.shortcutDesc}
              </div>
              <div className="ad-tag-list">
                {this.renderTags()}
              </div>
            </div>
          </div>
          <div className="fixed-contact">
            <img className='ad-phone-img' src={this.imgMap[code]} />
            <a className="visible-box" href="tel:4008297878" />
            {/*<div className="phone-box">*/}
            {/*  <a className="tel-a" href="tel:4008297878">400-829-7878</a>*/}
            {/*  <div className="contact-desc">*/}
            {/*    {messages('basic-1.key152')/*周一至周日 9:00 ~ 18:00*/}
            {/*  </div>*/}
            {/*</div>*/}
            {/*<div className="contact-title">*/}
            {/*  {messages('basic-1.key153')/*联系您的客服经理\\n或拨打咨询电话*/}
            {/*</div>*/}
          </div>
        </div>
        <div className="ad-common-body">
          <div className="introduce-title">
            {messages('basic-1.key154')/*简介*/}
          </div>
          <div className="img-list-box">
            <img
              onClick={()=>{window.open(currentAd.pageImage[0], '_blank')}}
              onMouseDown={e=>e.preventDefault()}
              className='ad-img'
              src={currentAd.pageImage[0]}
            />
          </div>
        </div>
      </div>
    );
  }
}

AdCommon.propTypes = {};

export default AdCommon;
